/**
 * Created by never on 2018/5/15.
 */
import React, {Component} from 'react';
import {
    StyleSheet,
    Text,
    View,
    TouchableOpacity,
    Image, AsyncStorage, Alert
} from 'react-native';
import {withNavigation} from 'react-navigation';
import Icon from 'react-native-vector-icons/EvilIcons';
import Volume from 'react-native-vector-icons/SimpleLineIcons';
import StyleComm from '../../../components/Style';
import ComPuter from 'react-native-vector-icons/Entypo';
import ExitCorn from 'react-native-vector-icons/Feather';
import Tool from '../../../components/Tool';

export default withNavigation(class DrawerScreenUserInfo extends Component {
    static navigationOptions = ({navigation, screenProps}) => ({
        header: null,
    });

    constructor(props) {
        super(props);
        this.state = {
            userInfo: []
        }
    }

    componentDidMount() {
        this._getUserInfo();
    }

    _getUserInfo() {
        let _this = this;
        Tool.fetchJson(Tool.appPath.mkst + 'user/getUserInfo', '', function (data) {
            _this.setState({
                userInfo: data.info
            });
        }, function () {

        }, function () {

        })
    }

    _signOutAsync() {
        Alert.alert(
            '提示',
            '您确定要退出系统登陆吗?',
            [{
                text: '取消', onPress: () => {
                }
            }, {
                text: '确定', onPress: () => {
                    AsyncStorage.multiRemove([Tool.storageConst.userKey, Tool.storageConst.gestureKey, Tool.storageConst.passwordKey], (error) => {
                        this.props.navigation.navigate('Auth');
                    });
                }
            }],
            {cancelable: false}
        )
    };

    render() {
        return (
            <View style={[styles.viewStyle]}>
                <View
                    style={{flex:0.3,backgroundColor:StyleComm.color.blue,flexDirection:'row',alignItems:'center',justifyContent:'center'}}>
                    <Image source={require('../../../assets/base/head.jpg')}
                           style={{width:80, height:80,borderRadius:50}}/>
                    <View>
                        <Text style={[styles.textStyle,styles.textL,{fontSize:StyleComm.fontSize.large,margin:0}]}>
                            {this.state.userInfo.a4Name}</Text>
                        <Text style={[styles.textStyle,styles.textL,{margin:0}]}> 工号:
                            <Text>{this.state.userInfo.bossCode}</Text></Text>
                        <Text style={[styles.textStyle,styles.textL,{margin:0}]}> {this.state.userInfo.orgName}</Text>
                        <View style={{backgroundColor:'#2EA9FF',
                            alignItems:'center',justifyContent:'center', width:90,height:25,borderRadius:10,marginTop:10}}>
                            <Text style={[styles.textNormal,{margin:0}]}>{this.state.userInfo.orgMgtName}</Text>
                        </View>
                    </View>
                </View>
                <View style={{flex:0.7,backgroundColor:StyleComm.color.white}}>
                    {/*flexDirection'row' 横向排列 justifyContent垂直居中 水平居中alignItems*/}
                    <View style={styles.menuView}>
                        <TouchableOpacity style={styles.menuView}
                                          onPress={() => this.props.navigation.navigate('SystemMess',{headerTitle:'系统消息'})}>
                            <Volume name={'volume-2'} size={15}
                                    style={[styles.iconStyle,{backgroundColor:StyleComm.color.blue}]}/>
                            <Text style={[styles.textCoB,styles.textL]}>系统消息</Text>
                        </TouchableOpacity>
                    </View>
                    <View style={styles.menuView}>
                        <TouchableOpacity style={styles.menuView}
                                          onPress={() => this.props.navigation.navigate('Notice')}>
                            <Volume name={'volume-1'} size={15}
                                    style={[styles.iconStyle,{backgroundColor:StyleComm.color.green}]}/>
                            <Text style={[styles.textCoB,styles.textL]}>公告管理</Text>
                        </TouchableOpacity>
                    </View>
                    <View style={styles.menuView}>
                        <ComPuter name={'document-landscape' } size={15}
                                  style={[styles.iconStyle,{backgroundColor:StyleComm.color.yellow}]}/>
                        <Text style={[styles.textCoB,styles.textL]}>安全管理</Text>
                    </View>
                    <View style={styles.menuView}>
                        <TouchableOpacity style={styles.menuView}
                                          onPress={() => {this.props.navigation.navigate('About',{headerTitle:'关于应用'});}}>
                            <Icon name={'link'} size={18}
                                  style={[styles.iconStyle,{backgroundColor:StyleComm.color.red}]}/>
                            <Text style={[styles.textCoB,styles.textL]}>关于应用</Text>
                        </TouchableOpacity>
                    </View>
                    <View style={styles.menuView}>
                        <TouchableOpacity style={styles.menuView}
                                          onPress={() => this._signOutAsync()}>
                            <ExitCorn name={'power'} size={15}
                                      style={[styles.iconStyle,{backgroundColor:StyleComm.color.red,paddingLeft:5}]}/>
                            <Text style={[styles.textCoB,styles.textL,{color:'#2196F3'}]}>退出系统</Text>
                        </TouchableOpacity>
                    </View>
                </View>
            </View>

        )
    }
});

const styles = StyleSheet.create({
    iconStyle: {
        width: 25,
        height: 25,
        borderRadius: 50,
        color: "#fff",
        padding: 4
    },
    menuView: {
        flexDirection: 'row',
        justifyContent: 'center',
        alignItems: 'center'
    },
    textStyle: {
        margin: 10,
        fontSize: StyleComm.fontSize.small,
        color: '#fff',

    },
    textNormal: {
        margin: 10,
        fontSize: StyleComm.fontSize.normal,
        color: '#fff',

    },
    textCoB: {
        margin: 10,
        fontSize: StyleComm.fontSize.normal,
        color: StyleComm.color.black,
        width: 120
    },
    textL: {
        textAlign: 'left'
    },
    textR: {
        textAlign: 'right',
    },
    viewStyle: {
        flex: 1
    },
    draView: {
        flex: 1,
        alignItems: 'center'
    },

});